<template>
  <div class="content_box">
    <div class="box">
      <p class="title">01.如何预定下单完成支付</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.选择场馆</p>
            <p>2.选择使用时长和开始时间</p>
            <p>3.页面付款</p>
            <p>4.分享权限给朋友</p>
          </div>
          <img mode="widthFix" src="/static/images/group1.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">02.如何进店开门</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.点击“开门”并选择“开大门” </p>
            <p>2.选择“开房间门”并选取房间 </p>
            <p>3.选择“好友开门”，将权限分享给朋友 </p>
            <p>4.提前到达，可点击“提前入场”消费</p>
          </div>
          <img mode="widthFix" src="/static/images/group2.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">03.与朋友享受美好时光</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.大厅和房间均有自助饮水设备，按需取用</p>
            <p>2.餐桌、厨房设施可随意使用，垃圾需收纳在指定位置</p>
            <p>3.垃圾放在指定位置</p>
            <p>4.大厅内设自助贩卖机，可按需购买</p>
          </div>
          <img mode="widthFix" src="/static/images/group3.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="box">
      <p class="title">04.离开请携带好随身物品</p>
      <div class="msg">
        <p class="title1">
          <img src="/static/images/star.png" alt=""/>
          自助操作
        </p>
        <div class="nr">
          <div class="left">
            <p>1.结束前30分钟、结束时将进行提醒</p>
            <p>2.消费结束后1分钟房间将自动关闭</p>
            <p>3.若您遗失物品请您及时联系门店微信</p>
            <p>4.如因自身原因于订单开始消费前取消：距开始时间一小时以上，收取10%平台调度费用；一小时以内，收取四小时最低消费</p>
            <p>5.如因自身原因在消费中提前结束订单：扣除四小时最低消费后退回</p>
          </div>
          <img mode="widthFix" src="/static/images/group4.png" alt=""/>
        </div>
      </div>
    </div>
    <div class="ewm_box">
      <div class="text">
        <p class="gt">!</p>
        使用过程中有疑问可以查看帮助中心或联系客服
      </div>
      <div class="ewm">
        <img mode="widthFix" src="/static/images/gz_ewm.jpg" alt=""/>
        <p>客服二维码</p>
      </div>
    </div>
    <p>.</p>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  data() {
    return{
      
    }
  },
  onShow() {},
  methods: {
    
  },
  onHide() {},
  onLoad() {
    
  },
  onUnload() {
  },
  created() {}
};
</script>

<style lang="scss"  scoped>
.content_box {
  background: #F5F5F5;
  padding-top:24rpx;
  .box{
    width: 92%;
    margin:0 auto;
    background: #FEFAF1;
    padding-top:24rpx;
    padding-bottom:24rpx;
    border-radius: 4rpx;
    margin-bottom:24rpx;
    .title{
      font-size:34rpx;
      color:#222;
      font-weight: bold;
      padding:0 24rpx;
      height: 82rpx;
      line-height: 82rpx;
    }
    .msg{
      width: 84%;
      margin:0 auto;
      background: #fff;
      padding:30rpx;
      border-radius: 4rpx;
      .title1{
        font-size:26rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        img{
          width: 24rpx;
          height: 24rpx;
          margin-right:8rpx;
        }
      }
      .nr{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top:20rpx;
        .left{
          width: 76%;
          color:#666;
          font-size:26rpx;
          line-height: 50rpx;
        }
        img{
          width: 116rpx;
        }
      }
    }
  }
  .ewm_box{
    width: 90%;
    margin:40rpx auto;
    .text{
      display: flex;
      font-size:24rpx;
      color:#666;
      align-items: center;
      margin-bottom:50rpx;
      .gt{
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border:1px solid #788933;
        margin-right:10rpx;
        font-size:24rpx;
        color:#788933;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .ewm{
      font-size:26rpx;
      text-align: center;
      color:#666;
      img{
        width: 200rpx;
      }
      p{
        margin-bottom:50rpx;
      }
    }
  }
}
</style>
